import React from 'react';
import { Button } from 'antd';
import ProForm, {
  ModalForm,
  ProFormText,
} from '@ant-design/pro-form';
import { useIntl } from 'umi';

export type ProcessorValueType = {
  name:string;
  key?: string;
  value?: string;
} & Partial<API.JobListItem>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: ProcessorValueType) => void;
  onSubmit: (values: ProcessorValueType) => Promise<void>;
  processorModalVisible: boolean;
  values: Partial<API.JobListItem>;
};

const ProcessorForm: React.FC<UpdateFormProps> = (props) => {
  const intl = useIntl();
  return (
    <ModalForm<ProcessorValueType>
    width={640}
    title={intl.formatMessage({
      id: 'pages.searchTable.updateForm.processor',
      defaultMessage: '执行',
    })}
    visible={props.processorModalVisible}
    autoFocusFirstInput
    modalProps={{
      onCancel: () => {
        props.onCancel();
      },
    }}
    onFinish={props.onSubmit}
  >
    <ProForm.Group>
    {/* <ProFormText width="md" disabled name="id" label="编号" initialValue={props.values.id}  /> */}
    <ProFormText width="md" disabled name="name" label="名称" initialValue={props.values.name}  />

        <ProFormText
          width="md"
          name="key"
          label="参数名"
          tooltip="最长为 24 位"
          placeholder="请输入名"
        />

        <ProFormText width="md" name="value" label="参数值" placeholder="请输入值" />
      </ProForm.Group>
      </ModalForm>
  );
};

export default ProcessorForm;
